<template>
  <div class="about">
    <!-- <button @click="getStudents">获取学生信息</button> -->
    <!-- <Category title="美食" :listData="foods"/>
    <Category title="游戏" :listData="games"/>
    <Category title="电影" :listData="films"/> -->
    <div>当前数为：{{sum}}</div>
    <!-- <div>当前数翻10倍为：{{$store.getters.bigSum}}</div> -->
    <div>当前数翻10倍为：{{bigSum}}</div>
    <div>学生名为：{{name}}</div>
    <div>年龄为：</div>
    <el-button @click="_c_add(1)">加1</el-button>
    <el-button @click="_c_delete">减1</el-button>
  </div>
</template>


<script>
// import axios from 'axios'
import Category from '@/components/Category.vue'
// import { response } from 'express'
import {mapState,mapGetters,mapMutations, mapActions} from 'vuex'
export default {
  components: { Category },
  name:'about',
  data(){
    return{
      n:1
      // foods:['火锅','羊肉串','鸡腿','牛排'],
      // games:['英雄联盟','王者荣耀','吃鸡'],
      // films:['《你好》','《活着》','《耦合》','《发送》']
    }
  },
  computed:{
    // jia(){
    //   return this.$store.state.sum
    // },
    // stuName(){
    //   return this.$store.state.name
    // },
    // ...mapState({jia:'sum',stuName:'name',stuAge:'age'}),
    ...mapState(['sum','name','age']),
    // ...mapGetters({bigSum:'bigSum'}),
    ...mapGetters(['bigSum']),
  },
  methods:{
    // getStudents(){
    //   axios.get('http://localhost:8080/api/students').then(
    //     response => {
    //       console.log('请求成功了',response.data);
    //     },
    //     error => {
    //       console.log('请求失败了',error.message);
    //     }
    //   )
    // }
    _c_add(){
    //   // this.$store.dispatch('add',this.n)
    //   // this.$store.commit('Add',this.n)
      this.Add(this.n)
    //   console.log();
    },
    _c_delete(){
      this.$store.dispatch('delete',this.n)
    },
    ...mapMutations(['Add'])
    // ...mapActions(['add'])
  },
  mounted() {
    console.log(this.$store);
    //mapState映射状态
    const x = mapState({jia:'sum',stuName:'name',stuAge:'age'})
    console.log(x);
  }
}
</script>

<style>
.about{
  display: flex;
  justify-content: space-around;
}
img{
  width: 100%;
}
</style>
